import { Component, ReactNode } from "react";
import { View, Textarea, Text, Picker, Image, Input } from "@tarojs/components";
import { AtList, AtListItem, AtImagePicker, AtButton } from "taro-ui";
import i1 from "./images/i1.png";
import loc from "../../assets/i1.png";
import "./index.scss";
import { isEmpty, uploadImgConvertUrl } from "../../utils/kit";
import Req, { BASE_URL } from "../../utils/request";
import Taro from "@tarojs/taro";
import ProjectSelect from "../../components/ProjectSelect";
export default class IssueForm extends Component {
  state = {
    files: [],
    findDate: "",
    problem: "",
    x: "",
    y: "",
    location: "",
    day: "",
    projectIsOpen: false,
    projectId: "",
    projectName: "",
    title: "",
    type: "",
    typeName: "",
    ptOptions: [],
  };
  onDateChange = (e) => {
    console.log(e);
    this.setState({
      findDate: e.detail.value,
    });
  };
  onChange = (files) => {
    console.log(files);
    this.setState({
      files,
    });
  };
  onSubmit = () => {
    const {
      files,
      findDate,
      problem,
      day,
      title,
      x,
      y,
      location,
      projectId,
      type,
      typeName,
    } = this.state;
    const { router } = Taro.getCurrentInstance();

    uploadImgConvertUrl(files).then((results) => {
      let img = results
        .map((e: any) => {
          if (e?.data) {
            return JSON.parse(e.data)?.fileName;
          } else {
            return e.fileName;
          }
        })
        .join(",");
      if (router?.params.id) {
        Req.post("/project/supervision/edit", {
          id: router.params.id,
          projectId,
          img,
          problem,
          title,
          day,
          type,
          findDate,
        }).then((r) => {
          Taro.eventCenter.trigger("refreshData", { force: true });
          Taro.navigateBack();
        });
      } else {
        Req.post("/project/supervision/add", {
          projectId,
          img,
          problem,
          title,
          day,
          type,
          findDate,
        }).then((r) => {
          if (r.code === 200) {
            Taro.eventCenter.trigger("refreshData", { force: true });
            Taro.navigateBack();
          }
        });
      }
    });
  };
  onOpenLocation = () => {
    Taro.chooseLocation({
      success: (res) => {
        console.log("位置名称：", res.name);
        console.log("经纬度：", res.latitude, res.longitude);
        this.setState({
          location: res.name,
          x: res.latitude,
          y: res.longitude,
        });
      },
      fail: (err) => {
        console.error("错误信息：", err.errMsg);
      },
      complete: () => {
        console.log("选择操作完成");
      },
    });
  };
  componentDidMount(): void {
    const { router } = Taro.getCurrentInstance();

    Req.get("/config/problem/type/list").then((r) => {
      this.setState({
        ptOptions: r.rows,
      });
    });

    if (router?.params.id) {
      Req.get(`/project/supervision/${router.params.id}`).then((r) => {
        if (r.code === 200) {
          let _files = [];
          if (r.data.img) {
            _files = r.data.img.split(",").map((e) => {
              return {
                url: BASE_URL + e,
              };
            });
          }
          this.setState({
            projectName: r.data.projectName,
            findDate: r.data.findDate,
            projectId: r.data.projectId,
            day: r.data.day,
            title: r.data.title,
            problem: r.data.problem,
            files: _files,
            type: r.data.type,
            typeName:r.data.typeName
          });
        }
      });
    }
  }
  render(): ReactNode {
    const {
      day,
      problem,
      title,
      location,
      projectIsOpen,
      projectId,
      projectName,
      type,
      typeName,
      ptOptions,
    } = this.state;
    return (
      <View className="if-container app-container">
        <AtList>
          <AtListItem
            title="标题"
            className="form-list-item no-active-effect-item"
            note={
              <View>
                <Input
                  disabled
                  placeholder="请输入"
                  value={title}
                  onInput={(e) => {
                    this.setState({
                      title: e.detail.value,
                    });
                  }}
                />
              </View>
            }
          />
          <Picker
            mode="selector"
            range={ptOptions}
            value={type}
            rangeKey="name"
            onChange={(e) => {
              this.setState({
                typeName: ptOptions[e.detail.value].name,
                type: ptOptions[e.detail.value].id,
              });
            }}
          >
            <AtListItem
              title={"问题类型"}
              className="form-list-item "
              note={
                <View>
                  <Text>{isEmpty(typeName) ? "请选择问题类型" : typeName}</Text>
                </View>
              }
            />
          </Picker>

          <AtListItem
            title="项目"
            className="form-list-item"
            arrow="down"
            onClick={() => {
              this.setState({
                projectIsOpen: true,
              });
            }}
            note={
              <View>
                <Text>{isEmpty(projectName) ? "请选择" : projectName}</Text>
              </View>
            }
          />
          <AtListItem
            title="问题说明"
            className="form-list-item no-active-effect-item remark-form-item no-arrow-space"
            note={
              <View>
                <Textarea
                  value={problem}
                  disabled
                  onInput={(e) => {
                    this.setState({
                      problem: e.detail.value,
                    });
                  }}
                  className="remark-textarea"
                  placeholder="请输入文字"
                />
              </View>
            }
            extraText={
              <View
                className="img-picker"
                style={{
                  textAlign: "left",
                }}
              >
                {/* <AtImagePicker
                  length={1}
                  files={this.state.files}
                  onChange={this.onChange}
                />
                 */}
                {this.state.files.map((e, i) => (
                  <Image
                    key={i}
                    src={e.url}
                    style={{
                      width: "80px",
                      height: "80px",
                    }}
                  />
                ))}
              </View>
            }
          />
          <Picker
            value={this.state.findDate}
            mode="date"
            disabled
            onChange={this.onDateChange}
          >
            <AtListItem
              title={"提交日期"}
              className="form-list-item no-arrow-space"
              note={
                <View className="if-date-content">
                  <Text>
                    {isEmpty(this.state.findDate)
                      ? "请选择日期"
                      : this.state.findDate}
                  </Text>
                  <Image className="date-icon" src={i1} />
                </View>
              }
            />
          </Picker>
          {/* <AtListItem
            onClick={this.onOpenLocation}
            title="定位"
            className="form-list-item no-arrow-space"
            note={
              <View className="select-content if-date-content">
                <Text>{isEmpty(location) ? "请选择定位" : location}</Text>
                <Image className="date-icon" src={loc} />
              </View>
            }
          /> */}

          <AtListItem
            title="整改期限"
            className="form-list-item no-active-effect-item"
            note={
              <View>
                <Input
                  disabled
                  value={day}
                  onInput={(e) => {
                    this.setState({
                      day: e.detail.value,
                    });
                  }}
                  placeholder="请输入"
                />
              </View>
            }
          />
        </AtList>
        <AtButton
          onClick={this.onSubmit}
          circle
          className="page-bottom-btn primary-btn-color"
          type="primary"
        >
          提交
        </AtButton>

        <ProjectSelect
          visible={projectIsOpen}
          onClose={() => {
            this.setState({
              projectIsOpen: false,
            });
          }}
          onSelect={(e) => {
            console.log(e);
            if (e.id) {
              this.setState({
                projectId: e.id,
                projectIsOpen: false,
                projectName: e.title,
              });
            }
          }}
        />
      </View>
    );
  }
}
